{% extends "home/base.html" %}
{% block more3 %} class="active" {% endblock %}
{% block page_title %} 景点推荐分析 {% endblock %}
{% block content %}
<div class="col-lg-12">
    <div class="card">
        <div class="card-header">
            <h6 class="card-title">城市搜索</h6>
        </div>
        <!-- 引入 echarts 主库 -->
        <div class="card-body">
            <form class="search-form" action="{{ url_for('home.ana_price3') }}" method="post">
                <div class="input-group">
                    <span class="input-group-text">
                        <i class="bi bi-search"></i>
                    </span>
                    <input type="text" name="keyword" class="form-control"
                           placeholder="搜索你需要的地名，例如：北京">
                </div>
            </form>
        </div>
    </div>
</div>
{% if error %}
    <br>

    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h6 class="card-title">推荐结果</h6>
            </div>
            <!-- 引入 echarts 主库 -->
            <div class="card-body">
                <div class="table-responsive">
                    <p>{{ error }}</p>
                </div>
            </div>
        </div>
    </div>
{% endif %}
{% if code %}
    <br>
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h6 class="card-title">推荐结果</h6>
            </div>
            <!-- 引入 echarts 主库 -->
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                        <thead>
                        <tr>
                            <th>名称</th>
                            <th>评论得分</th>
                            <th>距离</th>
                            <th>类型</th>
                            <th>价格</th>
                        </tr>
                        </thead>
                        <tfoot>
                        <!-- <tr>
                            <th>名称</th>
                            <th>价格</th>
                            <th>距离</th>
                        </tr> -->
                        </tfoot>
                        <tbody>
                        {% for result in hotel_data %}
                            <tr>
                                <td>{{ result['poiName'] }}</td>
                                <td>{{ result['commentScore'] }}</td>
                                <td>{{ result['distanceStr'] }}</td>
                                <td>{{ result['tagNameList'] }}</td>
                                <td>{{ result['price'] }}</td>
             
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <br>
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header">
                <h6 class="card-title">推荐地区景点类型可视化</h6>
            </div>
            <!-- 引入 echarts 主库 -->
            <div class="card-body">
                <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
                <div id="hot_time" style="width:100%;height:600px"></div>
                <script>
                    var chartDom = document.getElementById('hot_time');
                    var to_e_data = {{ to_e_data|safe }};
                    var myChart = echarts.init(chartDom, 'light');
                    var option;

                    option = {
                        title: {
                            text: '推荐地区景点类型可视化',
                            subtext: 'Fake Data',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [
                            {
                                name: '',
                                type: 'pie',
                                radius: '50%',
                                data: to_e_data,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };

                    option && myChart.setOption(option);
                </script>
            </div>
        </div>
    </div>
{% endif %}

      
{% endblock %}